<template>
  <!--
   基本表单验证
   1：表单元素值绑定
   2：el-form
         model:整个表单元素的值
         rules:规则
      el-form-item  prop=表单元素值的字段名
        rules：{
           prop的值:[
           {required:必填,message:'错误信息',trigger:'change/blur'},
           {min:最小长度,max:'最大长度',message:'错误信息',trigger:'change/blur'},
           {pattern:正则,message:'错误信息',trigger:'change/blur'}
           ]
        }
   全局表单验证
      1:基本表单验证ok
      2:el-form   ref="form"
      3:this.$refs.form.validate((result)=>{
        result:boolean
           true:成功
           false:失败
      })

    登陆api调用
    1：定义api
    2:导入
    3：点击确定，在表单验证通过后调用
    4：调用成功
       a:存储token,token要持久化
       b:提示
       c:跳转到首页
 -->

  <div
    v-loading="loading"
    class="login"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-form ref="form" :model="form" :rules="rules">
      <img class="logo" src="@/assets/common/login-logo.png" alt="">
      <el-form-item prop="mobile">
        <el-input v-model="form.mobile" prefix-icon="el-icon-user-solid" />
      </el-form-item>
      <el-form-item prop="password">
        <!-- .native 作用：让组件能使用原生的事件 -->
        <el-input
          v-model="form.password"
          prefix-icon="el-icon-lock"
          show-password
          @keyup.enter.native="submit"
        />
      </el-form-item>
      <el-form-item>
        <!-- 注意写注释 -->
        <el-button class="btn" @click="submit">{{
          $t('login.login')
        }}</el-button>
      </el-form-item>
      <p class="tip">帐号:13800000002 密码:123456</p>
    </el-form>
  </div>
</template>
<script>
// import { sysLogin } from '@/api/login'
export default {
  data() {
    return {
      loading: false,
      form: {
        mobile: '13800000002', //	string	必须		手机号
        password: '123456' //	string	必须		密码
      },
      rules: {
        mobile: [
          { required: true, message: '必填', trigger: 'change' },
          {
            pattern: /^1[3,9]\d{9}$/,
            message: '请正确输入手机号',
            trigger: 'change'
          }
        ], //	string	必须		手机号
        password: [
          { required: true, message: '必填', trigger: 'change' },
          {
            min: 6,
            max: 12,
            message: '请输入6-12位密码',
            trigger: 'change'
          }
        ] //	string	必须		密码
      }
    }
  },
  methods: {
    // 登录点击
    submit() {
      this.$refs.form.validate(async(result) => {
        console.log(result)
        if (result) {
          // console.log(1)
          this.loading = true
          try {
            await this.$store.dispatch('user/toLogin', this.form)
            // console.log(2)
            // const res = await sysLogin(this.form)
            // 存储token
            // this.$store.commit('user/setUserToken', res.data)
            // 提示
            this.$message.success('登录成功')
            // 跳转到首页
            this.$router.push('/')
          } catch {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  height: 100%;
  // js 与html  @代表src  style  ~@ 代表src
  background-image: url('~@/assets/common/login.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .logo {
    margin: 15px 15px 30px;
  }
  ::v-deep .el-input__inner {
    height: 48px;
    background-color: #d4e5ff;
  }
  .btn {
    width: 100%;
    height: 50px;
    background-color: #407ffe;
    border-color: #407ffe;
    color: #fff;
    font-size: 20px;
  }
  .tip {
    color: #fff;
  }
  ::v-deep .el-form-item__error {
    color: #fff;
  }
}
</style>
